<template>
  <div>

    <el-row>
      <el-col :span="24" id="VenueExamine1">

        <el-select v-model="refundStateChos" placeholder="请选择" @change="loadAllRefund()">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>


        <el-table :data="page" border>

          <el-table-column prop="refundId" label="退款id" width="100">
          </el-table-column>
          <el-table-column prop="userName" label="退款用户名" width="115">
          </el-table-column>
          <el-table-column prop="orderNum" label="退款订单号" width="115">
          </el-table-column>
          <el-table-column prop="refundReason" label="退款原因" width="200">
          </el-table-column>
          <el-table-column prop="refundPrice" label="退款总价" width="100">
          </el-table-column>

          <el-table-column prop="refundState" label="退款状态" width="90">
            <template slot-scope="scope">
              <template v-if="scope.row.refundState == 0">
                退款失败
              </template>
              <template v-if="scope.row.refundState == 1">
                退款成功
              </template>
              <template v-if="scope.row.refundState == 2">
                待退款
              </template>
            </template>
          </el-table-column>






          <el-table-column label="操作" width="150">
            <template #default="scope">

              <el-button @click="pass(scope.row.orderNum)" v-if="scope.row.refundState == '2'" type="text"
                size="small">通过</el-button>
              <el-button @click="reject(scope.row.refundId)" v-if="scope.row.refundState == '2'" type="text"
                size="small">驳回</el-button>

            </template>
          </el-table-column>

        </el-table>







        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "CoachExamineManagement",
    data() {
      return {
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
        refundStateChos: "",
        options: [{
          value: '0',
          label: '已处理'
        }, {
          value: '1',
          label: '待处理'
        }, {
          value: '',
          label: '全部'
        }],

      }
    },
    methods: {
      //驳回退款申请
      reject(id) {
        this.$http.get("/order/yRefund/rejectRefund", {
          params: {
            refundId: id
          }
        }).then(resp => {

          this.loadAllRefund();
        });
      },

      // 通过退款申请
      pass(orderNum) {
        this.$http.get("/order/yRefund/agreeRefund", {
          params: {
            orderNum: orderNum
          }


        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllRefund();
        });
      },
      // 分页pageSize变化
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllRefund();
      },
      // 分页pageNum变化
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllRefund();
      },
      // 加载教练入驻平台申请分页
      loadAllRefund() {
        this.$http.get("/order/yRefund/loadAllRefund", {
          params: {
            refundState: this.refundStateChos,
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      }

    },
    created() {
      this.loadAllRefund();
    }
  }
</script>

<style>
  #VenueExamine2 {
    margin-left: -520px;
    line-height: 100%;
    width: 100%
  }

  #VenueExamine1 {
    line-height: 100%;
    width: 100%
  }
</style>
